{% extends 'base/base.html' %}
{% block title %} {{ page_name }} {% endblock %}
{% block stylesheets %}
    {{ block.super }}
    <link href="/static/vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
    <link href="/static/vendors/bootstrap-table/css/bootstrap-table.min.css" rel="stylesheet">

{% endblock stylesheets %}
{% block content %}
    <div class="right_col" role="main">
        <div class="">
            <div class="clearfix"></div>

            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">

                            <h2>任务列表 </h2>
                            <ul class="nav navbar-right panel_toolbox">
                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                       aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="#">Settings 1</a>
                                        </li>
                                        <li><a href="#">Settings 2</a>
                                        </li>
                                    </ul>
                                </li>
                                <li><a class="close-link"><i class="fa fa-close"></i></a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>

                        <div class="x_content ">
                            <table id="table"></table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 参数化构建模态框 -->
    <div class="modal fade" id="build-project-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document" style="width:50%">
            <div class="modal-content">
                <div class="modal-header">
                    <span>构建项目</span>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <strong id="warningText"></strong>
                </div>
                <div class="modal-body" id="body">
                    <div>
                        <form method="post" class="form-horizontal form-bordered"
                              id="id_modal_form"
                              data-parsley-validate="true">

                            <div class="form-group">
                                <label class="col-md-2">项目名称:</label>
                                <div class="col-md-8">
                                    <span id="job_name"></span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-2">传入参数:</label>
                                <div class="col-md-8">
                                    <textarea id="job_params" class="form-control" rows="3" placeholder="JSON格式，没有请留空"></textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="buildProjectBtn">确认</button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block javascripts %}
    {{ block.super }}

    <!-- Datatables -->
    <script src="/static/vendors/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="/static/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
    <script src="/static/vendors/bootstrap-table/js/bootstrap-table.min.js"></script>
    <script src="/static/vendors/bootstrap-table/js/bootstrap-table-zh-CN.min.js"></script>
    <script src="/static/vendors/bootstrap-table/js/bootstrap-table-zh-CN.min.js"></script>
    <script>

        $(document).ready(function () {
            // 初始化表格
            initTable();
            $('#buildProjectBtn').click(function () {
                let job_name = $('#job_name').text()
                let url = '{% url 'jenkins_manage_detail' action='build' j_name='999999' %}'.replace(/999999/, job_name);
                let params = $('#job_params').val()
                $.ajax({
                    url: url,// 跳转到 action
                    type: 'post',
                    contentType: 'application/json; charset=UTF-8',
                    dataType: 'json',
                    data: params,
                    cache: false,
                    beforeSend: function (xhr, settings) {
                        xhr.setRequestHeader("X-CSRFToken", '{{ csrf_token }}')
                        $("#buildProjectBtn").attr("disabled", "disabled");
                        $("#buildProjectBtn").text("执行中");
                    },
                    success: function (data) {
                        $('#build-project-modal').hide()
                    },
                    complete: function () {
                        $("#buildProjectBtn").text("执行完成");
                        window.location.reload();
                    },
                    error: function () {
                    }
                });
            })
        });


        function initTable() {
            $('#table').bootstrapTable({
                method: 'post', // 向服务器请求方式
                contentType: "application/x-www-form-urlencoded", // 如果是post必须定义
                url: '#',
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 30, 50, 100],        //可供选择的每页的行数（*）
                search: true,                       //是否显示表格搜索
                strictSearch: true,                //是否全匹配搜索
                searchOnEnterKey: true,              //回车键开始搜索
                showRefresh: true,                  //是否显示刷新按钮
                locale: 'zh-CN',                    //本地化
                queryParamsType: 'limit',


                queryParams:    // 请求参数，这个关系到后续用到的异步刷新
                    function (params) {
                        return {
                            limit: params.limit,
                            offset: params.offset,
                            search: params.search,
                            'csrfmiddlewaretoken': '{{ csrf_token }}'
                        }
                    },

                columns: [
                    {
                        field: 'job_name',
                        title: 'job_name'

                    }, {
                        field: 'build_num',
                        title: 'build_num',
                    }, {
                        field: 'build_status',
                        title: 'build_status',
                    },
                    {
                        field: 'build_time',
                        title: 'build_time',

                    },
                    {
                        field: 'build_duration',
                        title: 'build_duration',
                    },

                    {
                        field: 'operate',
                        title: '操作',
                        formatter: function (value, row, index) {
                            var url1 = '{% url 'jenkins_manage_detail' action='view' j_name='999999' %}'.replace(/999999/, row.job_name);
                            var url2 = '{% url 'jenkins_manage_detail' action='build' j_name='999999' %}'.replace(/999999/, row.job_name);
                            var x = '<a href="' + url1 + '" class="btn btn-xs btn-info"><i class="fa fa-eye"></i> 最近日志 </a>';
                            var y = '<a id="buildJob" class="btn btn-xs btn-warning"><i class="fa fa-history"></i> 开始构建 </a>';
                            return x + y;
                        },
                        events: {
                            'click #buildJob': function (e, value, row, index) {
                                $('#job_name').text(row.job_name)
                                $('#build-project-modal').modal()
                            },

                        },
                    },
                ],
            });
        }

    </script>
{% endblock %}
